<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='stylesheets/style.css' />
    <link rel="stylesheet" href="stylesheets/amazeui.min.css">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="javascripts/jquery.min.js"></script>
    <script src="javascripts/amazeui.min.js"></script>
    <script src="javascripts/wx.js"></script>
    <script type="application/javascript">
        var date = Math.round(new Date().getTime()/1000);
        console.log(document.location.href);
        var signature = makeSignature(date, document.location.href);
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wx5253a3f0eb223fe4', // 必填，公众号的唯一标识
            timestamp: date, // 必填，生成签名的时间戳
            nonceStr: 'vv', // 必填，生成签名的随机串
            signature: signature,// 必填，签名，见附录1
            jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        console.log(wx.config);
    </script>
  </head>
  <body>
    <header data-am-widget="header"
            class="am-header am-header-default">
      <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
          <i class="am-header-icon am-icon-home"></i>
        </a>
      </div>
      <h1 class="am-header-title">
        <a href="#title-link" class=""><%=title%>
        </a>
      </h1>
    </header>
    <div>
      <nav data-am-widget="menu" class="am-menu  am-menu-dropdown1" data-am-menu-collapse>
        <a href="javascript: void(0)" class="am-menu-toggle">
          <i class="am-header-icon am-icon-bars"></i>
        </a>
        <ul class="am-menu-nav am-avg-sm-1 am-collapse">
          <li class="">
            <a href="##" class="" >所有宝贝</a>
          </li>
          <li class="">
            <a href="##" class="" >用户反馈</a>
          </li>
          <li class="">
            <a href="#c3" class="" >联系我们</a>
          </li>
        </ul>
      </nav>
    </div>

    <div data-am-widget="slider" class="am-slider am-slider-default" data-am-slider='{}' >
      <ul class="am-slides">
        <li>
          <img src="http://s.amazeui.org/media/i/demos/bing-1.jpg">
        </li>
        <li>
          <img src="http://s.amazeui.org/media/i/demos/bing-2.jpg">
        </li>
        <li>
          <img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">
        </li>
        <li>
          <img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">
        </li>
      </ul>
    </div>

    <div style="margin-top: 40px">
        <hr style="border: 1px dotted #c7c7c7;">
        <div style="text-align: center">
            <h3 >热销爆款</h3>
            <div>
                <img src="images/image1.jpg">
                </img>
            </div>
            <div>
                <button type="button" class="am-btn am-btn-secondary" style="width: 250px;margin-top: 30px;">立即购买</button>
            </div>
        </div>
    </div>
    <div style="margin-top: 20px">
        <hr style="border: 1px dotted #c7c7c7;">
        <div style="text-align: center">
            <h3 >用户反馈</h3>
            <div>
                <img src="images/image2.jpg">
                </img>
            </div>
        </div>
    </div>
    <hr style="border: 1px dotted #c7c7c7;">

  <script type="application/javascript">
      wx.ready(function(){
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          wx.checkJsApi({
              jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function(res) {
                  // 以键值对的形式返回，可用的api值true，不可用为false
                  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                  console.log(res.body);
              }
          });
      });

      wx.ready(function(){
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          wx.onMenuShareAppMessage({
              title: '薇薇的V-Show', // 分享标题
              desc: 'V塑-女人的最佳选择', // 分享描述
              link: document.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.lbsnicg.com/vv/images/VV.jpg', // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
                  // 用户确认分享后执行的回调函数
                  alert('分享成功');
              },
              cancel: function () {
                  // 用户取消分享后执行的回调函数
                  alert('取消分享');
              }
          });
      });

      wx.ready(function (){
          wx.onMenuShareTimeline({
              title: '薇薇的V-Show', // 分享标题
              link: document.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'https://www.lbsnicg.com/vv/images/VV.jpg', // 分享图标
              success: function () {
                  // 用户确认分享后执行的回调函数
                  alert('分享成功');
              },
              cancel: function () {
                  // 用户取消分享后执行的回调函数
                  alert('取消分享');
              }
          });
      });

      wx.error(function(res){
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          alert("errorMSG:"+res);
      });
  </script>
  </body>
</html>
